import React, { Component } from 'react'
import { connect } from 'dva';
import {
    Icon,
    Toast,
    Flex,
    Button,
    List
} from 'antd-mobile';

import NavTopBar from '../../components/NavTopBar/NavTopBar';
import MyScroll from '../../components/MyScroll/MyScroll';
import CanChangeScrollX from "../../components/CanChangeScrollX/CanChangeScrollX";
import NoLazyImg from '../../components/NoLazyImg/NoLazyImg';
import paytype from "../../assets/svg/paytype.svg"

import { pay_type, save_btn } from './paytype.less'

const Item = List.Item;


class PayType extends Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        if(this.props.order.list.length==0){
            this.props.dispatch({ type:'order/settlementEFF' });
        }
    }



    render() {
        const { dispatch, order } = this.props;
        const { list } = order;


        return (
            <Flex style={{
                height:"100%"
            }} direction="column"
                // className={addressList}
            >
                <NavTopBar dispatch={dispatch} title="选择支付配送方式"/>
                <MyScroll>
                    {/*<div className={pay_type}>*/}
                        {/*<Flex className="pay_title">*/}
                             {/*<Icon type={ paytype.id } />*/}
                             {/*<div>支付方式</div>*/}
                        {/*</Flex>*/}
                        {/*<CanChangeScrollX*/}
                            {/*style={{ height:"1.62rem" }}*/}
                            {/*wrapperId='CanChangeScrollPayTypeWraperId'*/}
                            {/*targetId='CanChangeScrolllPayTypeTargetId'*/}
                        {/*>*/}
                            {/*{*/}
                                {/*list.map((v,i,a)=>{*/}

                                    {/*let imgList = v.list.map((vv,ii,aa)=>{*/}

                                        {/*return (*/}
                                            {/*<NoLazyImg key={`${i}_${ii}`} src={vv.goodsImages} />*/}

                                        {/*)*/}
                                    {/*})*/}

                                    {/*return imgList*/}
                                {/*})*/}
                            {/*}*/}
                        {/*</CanChangeScrollX>*/}
                        {/*<Flex className="type">*/}
                            {/*<div>在线支付</div>*/}
                            {/*<div>货到付款</div>*/}
                        {/*</Flex>*/}
                    {/*</div>*/}

                    {
                        list.map((v,i,a)=>{

                            return (
                                <div key={i} className={pay_type}>
                                    <Flex className="pay_title">
                                        <Icon type={ paytype.id } />
                                        <div>支付方式</div>
                                    </Flex>
                                    <CanChangeScrollX
                                        style={{ height:"1.62rem" }}
                                        wrapperId='CanChangeScrollPayTypeWraperId'
                                        targetId='CanChangeScrolllPayTypeTargetId'
                                    >
                                        {
                                            v.list.map((vv,ii,aa)=>{

                                                return (
                                                    <NoLazyImg key={`${i}_${ii}`} src={vv.goodsImages} />

                                                )
                                            })
                                        }
                                    </CanChangeScrollX>
                                    <Flex className="type">
                                        <div className="select_type">在线支付</div>
                                        <div>货到付款</div>
                                    </Flex>
                                </div>
                            )
                        })
                    }

                    {
                        list.map((v,i,a)=>{

                            return (
                                <div key={i} className={pay_type}>
                                    <Flex className="pay_title">
                                        <Icon type={ paytype.id } />
                                        <div>{v.storeName }</div>
                                    </Flex>
                                    <CanChangeScrollX
                                        style={{ height:"1.62rem" }}
                                        wrapperId='CanChangeScrollPayTypeWraperId'
                                        targetId='CanChangeScrolllPayTypeTargetId'
                                    >
                                        {
                                            v.list.map((vv,ii,aa)=>{

                                                return (
                                                    <NoLazyImg key={`${i}_${ii}`} src={vv.goodsImages} />

                                                )
                                            })
                                        }
                                    </CanChangeScrollX>
                                    <Flex className="type">
                                        <div>商家配送</div>
                                        <div>自提</div>
                                    </Flex>
                                </div>
                            )
                        })
                    }

                </MyScroll>

                <Button className={save_btn}  type='primary'>确定</Button>
            </Flex>
        )


    }
}



export default connect(({order})=>({order}))(PayType);
